<template>
  <el-dialog
    custom-class="line_details_dialog"
    top="5vh"
    destroy-on-close
    :title="title"
    @close="close"
    append-to-body
    :model-value="Visible"
    width="80%"
  >
    <slot />
    <div v-if='info.approvalNo' :class="`transition-box  ${transition_flow_chart}`">
      <span @click="flowChartViewer" :class="`flow_chart_viewer`"><i :class="transition_flow_chart?'el-icon-right':'el-icon-back'"></i>审批历史详情</span>
      <FlowChart :info="info" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button size="small" type="primary" @click="Visible = false">返 回</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { Model, Prop, Options, Vue } from 'vue-property-decorator'
import FlowChart from '@/components/DataDetails/components/flowChart.vue'
@Options({
  components: {
    FlowChart,
  },
})
export default class lineDetails extends Vue {
  @Model('visible', { type: Boolean, default: false }) Visible!: boolean
  @Prop() info: any
  @Prop() title: any
  transition_flow_chart = ''
  flowChartViewer() {
    if (!this.transition_flow_chart) {
      this.transition_flow_chart = 'transition_flow_chart_in'
    } else {
      this.transition_flow_chart = ''
    }
  }
  close() {
    this.Visible = false
    this.transition_flow_chart = ''
  }
}
</script>
<style lang="scss">
.line_details_dialog {
  overflow: hidden;
}
.line_details_dialog .el-dialog__body {
  position: relative;
  min-height: 70vh;
  max-height: 70vh;
  overflow-x: hidden;

}
</style>
<style lang="scss" scoped>
.transition-box {
  z-index: 4;
  height: calc(100% + 60px);
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateX(100%);
  background: #fff;
  transition: all 1s;
}
.flow_chart_viewer {
  height: auto;
  z-index: 50;
  color: black;
  text-align: center;
  display: block;
  position: absolute;
  width: 35px;
  font-size: 18px;
  word-wrap: break-word;
  background: rgba($color: #4caf50, $alpha: 0.1);
  border: 2px solid #4caf50;
  padding: 10px 5px;
  border-radius: 4px;
  cursor: pointer;
  top: 50%;
  transform: translate(calc(-100% + 2px), -50%);
  transition: all 0.5s;
}
.flow_chart_viewer:hover {
  color: #fff;
  background: #4caf50;
}
.transition_flow_chart_in {
  transform: translateX(0);
  & > span {
    transform: translate(-2px, -50%);
  }
}
</style>
